<template>
  <div>
    <van-loading v-if="loading" />
    <van-icon
      :color="value==1 ? '#ffa500' : '#777'"
      :name="value==1 ? 'good-job' : 'good-job-o'"
      @click="onCollect"
      v-else
    />
  </div>
</template>

<script>
import {reqeustLike,reqeustOnLike} from '@/api'
export default {
  name: "LikeArt",
  props: {
    value: {
      type: Number,
      required: true,
    },
    id:{
        type: String ||Number,
        required:true,
    }
  },
  data(){
    return {
        loading:false
    }
},
methods:{
    async onCollect(){
        // 判断是否收藏
        try {
            this.loading=true
            if(this.value){
            // 已收藏
            await reqeustOnLike(this.id)
        }else{
            // 未收藏
            await  reqeustLike(this.id)   
        }
        this.$emit('update:value',this.value?0:1)
        }finally{ 
        this.loading = false
        }
    }
  }
};
</script>

<style lang="scss" scoped></style>
